<mat-card fxLayout="column" fxLayoutAlign="space-around center">
  <mat-spinner *ngIf="isLoading"></mat-spinner>
  <form
    #signUpForm='ngForm'
    *ngIf="!isLoading"
    fxLayout="column"
    fxLayoutAlign="space-around center"
    id="sign-up-form" ngClass="sign-up-form"
    (submit)="submitForm(signUpForm)"
  >
    <mat-form-field>
      <input #mobileNumber='ngModel'
             matInput
             name="mobileNumber"
             ngModel
             placeholder="091000000"
             required
             type="tel"
      />
      <mat-error *ngIf="mobileNumber.invalid" i18n>Please Enter Valid Phone Number</mat-error>
    </mat-form-field>
    <mat-form-field >
      <input #nationalId='ngModel'
             matInput
             name="nationalId"
             ngModel
             placeholder="کد ملی"
             required
             type="number"
      />
      <mat-error *ngIf="nationalId.invalid" i18n>Please Enter Valid Phone Number</mat-error>
    </mat-form-field>
  <mat-form-field>
      <input #password='ngModel'
             matInput
             name="password"
             ngModel
             placeholder="password"
             required
             type="password"
      />
      <mat-error *ngIf="password.invalid" i18n>Please Enter Valid Phone Number</mat-error>
    </mat-form-field>
    <button mat-raised-button color="primary" type="submit" i18n *ngIf="verifyLevel">Request verification code</button>
    <button mat-raised-button color="accent" type="submit" i18n *ngIf="!verifyLevel">Send</button>
    <mat-form-field *ngIf="!verifyLevel">
      <input #verificationCode='ngModel'
             matInput
             name="verificationCode"
             ngModel
             placeholder="verificationCode"
             required
             type="number"
      />
      <mat-error *ngIf="verificationCode.invalid" i18n>Please Enter Valid Phone Number</mat-error>
    </mat-form-field>
  </form>
</mat-card>
